<script lang="ts" setup>
import {onMounted, Ref, ref} from 'vue';
import * as echarts from "echarts";
import { useUserStore } from '@/store'
import {absAdminPie_option} from "@/assets/echarts/option/absEcharts.js";
import {caAdminPie_option} from "@/assets/echarts/option/caEcharts.js";
import {ppAdminPie_option} from "@/assets/echarts/option/ppEcharts.js";

const userStore = useUserStore()


const caChartDom: Ref<HTMLElement|any> =ref(null)
const drawCaChart = () => {
  const chart = echarts.init(caChartDom.value)
  chart.setOption(caAdminPie_option)
  chart.resize()
  window.addEventListener("resize",() => {
    chart.resize()
  })
}

const ppChartDom: Ref<HTMLElement|any> =ref(null)
const drawPpChart = () => {
  const chart = echarts.init(ppChartDom.value)
  chart.setOption(ppAdminPie_option)
  chart.resize()
  window.addEventListener("resize",() => {
    chart.resize()
  })
}

const absChartDom: Ref<HTMLElement|any> =ref(null)
const drawAbsChart = () => {
  const chart = echarts.init(absChartDom.value)
  chart.setOption(absAdminPie_option)
  chart.resize()
  window.addEventListener("resize",() => {
    chart.resize()
  })
}

onMounted(() => {
  if(  userStore.userRole.some(role => role === 'ROLE_ADMIN'))
  {
    console.log(111)
    drawAbsChart()
    drawPpChart()
    drawCaChart()
  }
})

</script>

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div ref="caChartDom" style="width: 100%; height: 300px;"></div>
      </el-col>
      <el-col :span="8">
        <div ref="ppChartDom" style="width: 100%; height: 300px;"></div>
      </el-col>
      <el-col :span="8">
        <div ref="absChartDom" style="width: 100%; height: 300px;"></div>
      </el-col>
    </el-row>
  </div>

</template>

<style scoped lang="scss">

</style>